<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  <title>创建调查问卷</title>
  <meta name="keywords" content=" " />
  <meta name="description" content="" />
  <link rel="stylesheet" href="https://zc.alltesting.cn/css/reset.css">
  <link rel="stylesheet" href="./css/common-style.css">
  <link rel="stylesheet" href="./css/creat.css">
  <!-- 1. 引入vue，需要引用在 ElementUI 之前-->
  <script src="./js/vue.js"></script>
  <!-- 2. 导入css -->
  <link href="./element-ui@2.15.8/lib/theme-chalk/index.css" rel="stylesheet">
  <!-- 3. 引入ElementUI组件 -->
  <script src="./element-ui@2.15.8/lib/index.js"></script>
</head>

<body>
  <!-- header 占位符 -->
  <div style="height: 70px;width:100%">
    <header style="position: fixed;top:0;left:0;right:0;background-color:#212832;height: 70px;z-index: 100;"></header>
  </div>
  <div id="create">
    <!-- 工具栏 -->
    <div class="questionnaire-bar-placeholder"></div>
    <div class="questionnaire-bar">
      <div class="ASQ-container">
        <div class="questionnaire-bar-content">
          <div class="bar-left">
            <i class="el-icon-back"></i>
            发布调查问卷
          </div>
          <div class="bar-right">
            <a href="/preview.html" @click="handlePreviewClick">预览</a>
            <a @click="handleSaveDraftsClick">保存草稿</a>
            <a  style="background-color:#448AF7;color:#fff">立即发布</a>
          </div>
        </div>

      </div>
    </div>

    <div class="questionnaire-main-area">
      <div class="ASQ-container">
        <div class="questionnaire-main-content">
          <div class="left-menus">
            <el-tabs type="border-card">
              <el-tab-pane label="题型选择">
                <div class="question-types-list">
                  <label>选择题</label>
                  <button @click="addQuestion(scqData)"><img
                      src="./images/create/single-choice-checked.png">单选题</button>
                  <button @click="addQuestion(mcqData)"><img
                      src="./images/create/multiple-choice-checked.png">多选题</button>
                  <button @click="addQuestion(iuqData)"><img src="./images/create/upload-img.png">图片投票</button>
                  <label>填空题</label>
                  <button @click="addQuestion(siqData)"><img src="./images/create/single-input-icon.png">填空题</button>
                  <button @click="addQuestion(miqData)"><img src="./images/create/multiple-input-icon.png">多项填空</button>
                </div>
              </el-tab-pane>
              <el-tab-pane label="问卷大纲">
                <el-link :underline="false" v-for="(item,index) in questionnaireData.questionData"
                  class="catalogue-list" key="index">
                  {{index+1}}、{{item.title}}</el-link>
              </el-tab-pane>
            </el-tabs>
          </div>
          <ul class="right-questionnaire-item-list">
            <!-- 问卷主体部分 -->
            <el-form :model="questionnaireData" :rules="questionnaireRules" ref="ruleForm" label-width="100px"
              class="demo-ruleForm">
              <div class="question-item title-and-desc">
                <el-form-item prop="title">
                  <el-input v-model="questionnaireData.title" placeholder="问卷标题" class="questionnaire-title-input">
                  </el-input>
                </el-form-item>
                <el-form-item prop="desc">
                  <el-input type="textarea" v-model="questionnaireData.desc" placeholder="添加问卷调查说明"
                    style="margin-top:10px" :autosize="{ minRows: 2, maxRows: 5}"></el-input>
                </el-form-item>
              </div>
              <el-form-item v-for="(item,index) in questionnaireData.questionData"
                @click.native="selectElFormItem(index)" class="question-item" :class="{currentListItem:index == num}"
                :key="Number(item.id)">

                <!-- 题目标题 -->
                <div class="question-tit">
                  <span class="serial-number">{{index+1}}</span>
                  <el-input v-model="item.title" placeholder="请输入题目" class="question-tit-input"></el-input>
                  <div class="question-tit-actions">
                    <el-tooltip content="复制题目" placement="top">
                      <i class="el-icon-document-copy" @click="copyQuestion(index)"></i>
                    </el-tooltip>
                    <el-tooltip content="删除题目" placement="top">
                      <i class="el-icon-delete" @click="deleQuestion(index)"></i>
                    </el-tooltip>
                  </div>
                </div>

                <!-- 题目内容 -->
                <ul class="question-content">

                  <!-- 单选题-->
                  <div class="choice-list" v-if="item.type==='sc'">
                    <div class="choice-item" v-for="(choiceItem,choiceIdx) in item.choice" key="choiceItem.label">
                      <img src="./images/create/single-choice.png">
                      <el-input v-model="choiceItem.title" placeholder="选项"></el-input>
                      <el-tooltip content="删除选项" placement="top">
                        <i class="el-icon-delete" @click="deleChoice(index,choiceIdx)" style="cursor: pointer;"></i>
                      </el-tooltip>
                    </div>

                    <div class="other-choice-item" v-for="(otherChoiceItem,otherChoiceIdx) in item.otherChoice"
                      key="otherChoiceItem.label">
                      <img src="./images/create/single-choice.png">
                      <el-input v-model="otherChoiceItem.title" placeholder="其他选项" class="other-choice-default-text">
                      </el-input>
                      <img src="./images/create/other-input-text.png">
                      <el-tooltip content="删除选项" placement="top">
                        <i class="el-icon-delete" @click="deleOtherChoice(index,otherChoiceIdx)"
                          style="cursor: pointer;"></i>
                      </el-tooltip>
                    </div>
                  </div>

                  <!-- 多选题 -->
                  <div class="choice-list" v-if="item.type==='mc'">
                    <div class="choice-item" v-for="(choiceItem,choiceIdx) in item.choice" key="choiceItem.label">
                      <img src="./images/create/multiple-choice.png">
                      <el-input v-model="choiceItem.title" placeholder="选项"></el-input>
                      <el-tooltip content="删除选项" placement="top">
                        <i class="el-icon-delete" @click="deleChoice(index,choiceIdx)" style="cursor: pointer;"></i>
                      </el-tooltip>
                    </div>

                    <div class="other-choice-item" v-for="(otherChoiceItem,otherChoiceIdx) in item.otherChoice"
                      key="otherChoiceItem.label">
                      <img src="./images/create/multiple-choice.png">
                      <el-input v-model="otherChoiceItem.title" placeholder="选项1" class="other-choice-default-text">
                      </el-input>
                      <img src="./images/create/other-input-text.png">
                      <el-tooltip content="删除选项" placement="top">
                        <i class="el-icon-delete" @click="deleOtherChoice(index,choiceOtherIdx)"
                          style="cursor: pointer;"></i>
                      </el-tooltip>
                    </div>
                  </div>

                  <!-- 单项填空题 -->
                  <div class="choice-list" v-if="item.type==='si'">
                    <img src="./images/create/input-text.png">
                  </div>

                  <!-- 多项填空题 -->
                  <div class="choice-list" v-if="item.type==='mi'">
                    <div class="choice-item multiple-inputs" v-for="(choiceItem,choiceIdx) in item.choice"
                      key="choiceIdx">
                      <el-input v-model="choiceItem.title" placeholder="请输入问题"></el-input>
                      <el-tooltip content="删除选项" placement="top">
                        <i class="el-icon-delete" @click="deleChoice(index,choiceIdx)" style="cursor: pointer;"></i>
                      </el-tooltip>
                      <img src="./images/create/input-text.png">
                    </div>
                  </div>

                  <!-- 图片投票 -->
                  <div v-if="item.type==='iu'" class="general-choice-item image-vote">
                    <el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple
                      list-type="picture-card" :limit="5" :show-file-list="true" :on-exceed="handleExceed"
                      :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                      <i class="el-icon-upload"></i>
                      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                      <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                  </div>
                </ul>

                <!-- 操作：存在于单选、多选、多项填空模块 -->
                <div class="question-content-actions"
                  v-if="(item.type==='sc'||item.type==='mc'||item.type==='mi')&&index === num ">
                  <i class="el-icon-document-add" @click="addChoice(item.type,index)">&ensp;添加选项</i>
                  <i class="el-icon-folder-add" @click="addOtherChoice(index)" v-if="item.type!=='mi'">&ensp;添加其他选项</i>
                </div>
              </el-form-item>

            </el-form>
          </ul>
        </div>
      </div>

    </div>
  </div>


</body>
<script>
  var app = new Vue({
    el: '#create',
    data() {
      return {
        questionnaireRules: {
          title: [
            { required: true, message: '请输入问卷标题', trigger: 'blur' },
          ],
          desc: [
            { required: true, message: '请输入问卷简介', trigger: 'blur' },
          ],
          title2: [
            { required: true, message: '请输入2问卷标题', trigger: 'blur' },
          ],

        },
        activeName: 'first',
        num: -1,
        radio: "",
        checked1: "",
        dialogImageUrl: '',
        dialogVisible: false,
        defaulttxt: "其他",

        // 单选题 初始数据
        scqData: {
          id: Date.now(),
          type: "sc",
          title: "这是一道单选题",
          radio: '',
          choice: [
            {
              label: Date.now(),
              title: '选项'
            },
          ],
          otherChoice: [],
        },

        // 多选题 初始数据
        mcqData: {
          id: Date.now(),
          type: "mc",
          title: "这是一道多选题",
          checkList: [],
          choice: [
            {
              label: Date.now(),
              title: '选项'
            },
          ],
          otherChoice: [],
        },

        // 图片投票题 初始数据
        iuqData: {
          id: Date.now(),
          type: "iu",
          title: "这是一道图片投票题",
        },

        // 单项填空 初始数据
        siqData: {
          id: Date.now(),
          type: "si",
          title: "这是一道单项填空题",
          inputValue: ""
        },

        // 多项填空 初始数据
        miqData: {
          id: Date.now(),
          type: "mi",
          title: "这是一道多项填空题",
          choice: [
            {
              title: "请继续输入问题",
              inputValue: ""
            },
            {
              title: "请继续输入问题",
              inputValue: ""
            }
          ],
        },

        // 问卷数据存储
        questionnaireData: {
          title: "调查问卷标题",
          desc: "问卷简介",
          questionData: []
        }
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },

      // 左侧菜单栏：添加 单选题/多选题/图片投票题/单项填空题/多项填空
      addQuestion(questionData) {
        const deepCopyQuestion = JSON.parse(JSON.stringify(questionData));
        const insertIndex = this.num
        if (insertIndex != -1) {
          this.questionnaireData.questionData.splice(insertIndex + 1, 0, deepCopyQuestion);
        } else {
          this.questionnaireData.questionData.push(deepCopyQuestion);
        }
      },

      // 复制题目
      copyQuestion(index) {
        const copyQuestionItem = this.questionnaireData.questionData[index]
        const copyQuestionItemNew = JSON.parse(JSON.stringify(copyQuestionItem));
        this.questionnaireData.questionData.splice(index + 1, 0, copyQuestionItemNew);
      },

      // 删除题目
      deleQuestion(index) {
        this.$confirm('确定要删除该题目么?', '删除题目确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.questionnaireData.questionData.splice(index, 1),
            this.num = -1
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch((error) => {
          console.log(error);
        });
      },

      // 增加选项
      addChoice(type, index) {
        if (type === "mi") {
          this.questionnaireData.questionData[index].choice.push({
            title: "问题",
            inputValue: ""
          })
        } else {
          this.questionnaireData.questionData[index].choice.push({
            label: Date.now(),
            title: "选项"
          })
        }

      },

      // 增加其他选项
      addOtherChoice(index) {
        this.questionnaireData.questionData[index].otherChoice.push({
          label: Date.now(),
          title: '其他',
          inputValue: ""
        })
      },

      // 删除选项
      deleChoice(index, choiceIdx) {
        this.questionnaireData.questionData[index].choice.splice(choiceIdx, 1)
      },

      // 删除常规选项
      deleOtherChoice(index, otherChoiceIdx) {
        this.questionnaireData.questionData[index].otherChoice.splice(otherChoiceIdx, 1)
      },

      // 当选中右侧的题目，赋蓝色边框
      selectElFormItem(index) {
        this.num = index
      },

      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },

      handleRemove(file, fileList) {
        console.log(file, fileList);
      },

      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },

      //保存草稿
      handlePreviewClick() {
        window.localStorage.setItem('questionnaireData', JSON.stringify(this.questionnaireData))
      },

      //保存草稿
      handleSaveDraftsClick() {
        window.localStorage.setItem('questionnaireData', JSON.stringify(this.questionnaireData)),
          this.$message({
            message: '数据保存成功！',
            type: 'success'
          });
      }
    }
  })
</script>

</html>